<script setup lang="ts">
import pageHeader from "./components/pageHeader.vue";
import cardHeader from "./components/card_header.vue";
import baseService from "@/service/baseService";
import {onBeforeMount, reactive} from "vue";

const dataArr = reactive({}) as any;
let arr = ["lyb", "ssp"];

const getDataList = () => {
  baseService.get("clc/clcvote/page", {page: 1, limit: 10}).then((res) => {
    dataArr["clcvote"] = res.data.list;
  });
  baseService.get("/clc/clceventrelease/page", {page: 1, limit: 10}).then((res) => {
    dataArr["clceventrelease"] = res.data.list;
  });
  baseService.get("/clc/clcdiscussion/page", {page: 1, limit: 10}).then((res) => {
    dataArr["clcdiscussion"] = res.data.list;
  });
  for (let i = 0; i < arr.length; i++) {
    baseService.get("/bus/busmoment/page", {page: 1, limit: 50, type: arr[i], isPublish: 1}).then((res) => {
      dataArr[arr[i]] = res.data.list;
    });
  }
};

onBeforeMount(() => {
  getDataList();
});
</script>

<template>
  <!--文明塍里-->
  <div class="mod-out-home">
    <pageHeader></pageHeader>
    <div class="max_screen_body">
      <div class="culture_home_top_box">
        <div class="culture_home_top_left_box">
          <card-header :title="'活动发布'" :path="'screen/card_header5.png'"></card-header>
          <div class="culture_home_top_right_body culture_home_top_body">
            <el-carousel indicator-position="none" arrow="never" :interval="6000" v-if="dataArr['clceventrelease']">
              <el-carousel-item v-for="item in dataArr['clceventrelease']" :key="item.id">
                <div class="culture_home_top_right_body_item">
                  <div class="left_img_box">
                    <img :src="'https://' + item.url" alt=""/>
                  </div>
                  <div class="right_text_box">
                    <div class="right_text_box_item">
                      <div class="item_left">活动主题：</div>
                      <div class="item_right">{{ item.theme }}</div>
                    </div>
                    <div class="right_text_box_item">
                      <div class="item_left">活动名额：</div>
                      <div class="item_right">{{ item.quota }}人</div>
                    </div>
                    <div class="right_text_box_item">
                      <div class="item_left">活动时间：</div>
                      <div class="item_right">{{ item.activityTime }}</div>
                    </div>
                    <div class="right_text_box_item">
                      <div class="item_left">活动地点：</div>
                      <div class="item_right">{{ item.address }}</div>
                    </div>
                    <div class="right_text_box_item" v-if="item.volunteer > 0">
                      <div class="item_left">招募志愿者：</div>
                      <div class="item_right">{{ item.volunteer }}人</div>
                    </div>
                    <div class="right_text_box_item">
                      <div class="item_left">报名方式：</div>
                      <div class="item_right">{{ item.phone }}</div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="culture_home_top_right_box">
          <card-header :title="'乡村议事会'" :path="'screen/card_header5.png'"></card-header>
          <div class="culture_home_top_right_body culture_home_top_body">
            <el-carousel indicator-position="none" arrow="never" :interval="6000" v-if="dataArr['clcdiscussion']">
              <el-carousel-item v-for="item in dataArr['clcdiscussion']" :key="item.id">
                <div class="culture_home_top_right_body_item">
                  <div class="left_img_box">
                    <img :src="'https://' + item.url" alt=""/>
                  </div>
                  <div class="right_text_box">
                    <div class="right_text_box_text">{{ item.remark }}</div>
                    <div class="right_text_box_item">
                      <div class="item_left">参与对象：</div>
                      <div class="item_right">{{ item.participate }}</div>
                    </div>
                    <div class="right_text_box_item">
                      <div class="item_left">活动时间：</div>
                      <div class="item_right">{{ item.activityTime }}</div>
                    </div>
                    <div class="right_text_box_item">
                      <div class="item_left">活动地点：</div>
                      <div class="item_right">{{ item.address }}</div>
                    </div>
                    <div class="right_text_box_item">
                      <div class="item_left">咨询电话：</div>
                      <div class="item_right">{{ item.phone }}</div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="culture_home_bottom_box">
        <div class="culture_home_top_left_box">
          <card-header :title="'家乡投票'" :path="'screen/card_header3.png'"></card-header>
          <div class="card-body card-body1">
            <div class="card-body_left" v-if="dataArr['clcvote']&&dataArr['clcvote'][0]">
              <div class="card-body_left_top">
                <div class="img_box"><img src="@/assets/images/screen/ava.png" alt=""/></div>
                <div class="img_desc">塍里村委会发起一个投票</div>
              </div>
              <div class="card-body_left_bottom" v-scroll="100">
                <div class="table_title">{{ dataArr['clcvote'][0].theme }}</div>
                <div class="table_item" v-for="(item,index) in dataArr['clcvote'][0].voteOptionList" :key="item.id">
                  <div class="table-item-left">{{ item.optionName }}</div>
                  <div class="table-item-center">{{ item.poll }}票</div>
                  <div class="table-item-right">{{ item.percentage }}</div>
                </div>
              </div>
            </div>
            <div class="card-body_right" v-if="dataArr['clcvote']&&dataArr['clcvote'][0]">
              <div class="card-body_right_title">扫码参与投票</div>
              <div class="card-body_right_img_box">
                <img src="@/assets/images/screen/code.png" alt=""/>
              </div>
            </div>
          </div>
        </div>
        <div class="culture_home_top_center_box">
          <card-header :title="'村民留言板'" :path="'screen/card_header3.png'"></card-header>
          <div class="card-body" v-scroll="100">
            <div class="card-body_it" v-for="(item, index) in dataArr['lyb']" :key="index + '_key5'">
              <div class="card-body_item">
                <div class="left_img_box">
                  <div class="right_text_name">问</div>
                  <!--                  <img src="@/assets/images/screen/ava2.png" alt=""/>-->
                </div>
                <div class="right_text_box">

                  <div class="right_text_desc">{{ item.content }}</div>
                </div>
              </div>
              <div class="card-body_item" v-if="item.replyContent">
                <div class="left_img_box left_img_box2">
                  <!--                  <img src="@/assets/images/screen/ava.png" alt=""/>-->
                  <div class="right_text_name">答</div>
                </div>
                <div class="right_text_box">
                  <!--                  <div class="right_text_name" style="color: #3378F6">答：</div>-->
                  <div class="right_text_desc">{{ item.replyContent }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="culture_home_bottom_right_box">
          <card-header :title="'随手拍'" :path="'screen/card_header3.png'"></card-header>
          <div class="card-body" v-scroll="100">
            <div class="culture_home_top_right_box_item" v-for="item in dataArr['ssp']" :key="item.id">
              <div class="ava_box">
                <div class="img_box">
                  <img src="@/assets/images/screen/ava3.png" alt=""/>
                </div>
                <div class="name_box">
                  <div class="name">村民</div>
                  <div class="time">{{ item.createDate }}</div>
                </div>
              </div>
              <div class="content_box">
                <div class="text_box">{{ item.content }}</div>
                <div class="img_box" v-if="item.photo">
                  <el-image v-for="(ite, index) in item.photo.split(',')" :key="index + '_image'"
                            style="width: 100%; height: 100%; margin-right: 10px" :src="'https://' + ite"
                            :preview-src-list="[item.photo.split(',').map((itee:any)=>'https://' + itee)]"
                            :initial-index="index"
                            fit="cover"></el-image>
                </div>
              </div>
              <div class="replay_box" v-if="item.replyContent">
                <div class="left_img_box">
                  <img src="@/assets/images/screen/ava.png" alt=""/>
                </div>
                <div class="right_text_box">
                  <div class="right_text_name">回复</div>
                  <div class="right_text_desc">{{ item.replyContent }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.max_screen_body {
  flex-direction: column;

  .culture_home_top_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2.5vh;

    .culture_home_top_body {
      width: 48.5vw;
      height: 40.3vh;
      overflow: auto;
      padding: 2.5vh 2.1vw;
      background: #112a38;
      display: flex;
      align-items: center;

      .el-carousel {
        height: 100%;

        :deep(.el-carousel__container) {
          height: 100%;
        }
      }

      .left_img_box {
        width: 17.2vw;
        height: 35.2vh;
        border: 0.1vw solid #1aa6f2;
        margin-right: 3.5vw;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .right_text_box {
        flex: 1;

        .right_text_box_item {
          display: flex;
          font-size: 1.2vw;
          color: #ffffff;
          letter-spacing: 0.15vw;
          align-items: baseline;
          margin-bottom: 0.5vh;

          .item_left {
            opacity: 0.6;
          }

          .item_right {
            font-weight: 500;
            flex: 1;
          }
        }

        .right_text_box_item:last-child {
          margin-bottom: 0;
        }
      }
    }

    .culture_home_top_right_body {
      display: block;

      .culture_home_top_right_body_item {
        display: flex;
        align-items: center;

        .right_text_box_text {
          font-size: 1.5vw;
          font-weight: 500;
          color: #ffffff;
          margin-bottom: 2.5vh;
        }
      }
    }
  }

  .culture_home_bottom_box {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .card-body1 {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .card-body {
      width: 31.9vw;
      height: 40.3vh;
      background: #112a38;
      padding: 2vh 1vw;
      overflow: auto;

      .card-body_left {
        .card-body_left_top {
          display: flex;
          align-items: center;
          margin-bottom: 1.5vh;

          .img_box {
            margin-right: 0.5vw;
            width: 1.1vw;
            height: 2vh;
            border-radius: 50%;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .img_desc {
            font-size: 0.7vw;
            color: #ffffff;
          }
        }

        .card-body_left_bottom {
          background: #121f2e;
          width: 15.1vw;
          height: 32.5vh;
          overflow: auto;
          padding: 1.5vh 0.8vw;

          .table_title {
            font-size: 1.2vw;
            color: #ffffff;
            letter-spacing: 0.1vw;
            margin-bottom: 1.5vh;
          }

          .table_item {
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 0.8vw;
            color: #ffffff;
            padding: 1vh 0.3vw;
            border-radius: 0.2vw;
          }

          .table-item-left {
            max-width: 50%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .table_item:nth-child(2n + 2) {
            border: 1px solid;
            background: #134552;
            border-image: linear-gradient(60deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%) 2 2 2 2;
          }
        }
      }

      .card-body_right {
        .card-body_right_title {
          font-size: 1.2vw;
          margin-bottom: 3vh;
          text-align: center;
          color: #ffffff;
        }

        .card-body_right_img_box {
          width: 9.4vw;
          height: 16.7vh;
          border: 0.2vw solid #06829a;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .culture_home_top_center_box {
    .card-body_item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 2.5vh;
    }

    .card-body_item:last-child {
      margin-bottom: 0;
    }

    .card-body_it {
      margin-bottom: 2.5vh;
      border-bottom: 2px dashed #284E79;
      padding-bottom: 2.5vh;
    }

    //.card-body_item2 {
    //  background: #121f2e;
    //  padding: 0.9vh 0.5vw;
    //  border-radius: 4px;
    //
    //  .right_text_desc {
    //    padding: 0 !important;
    //    background: transparent !important;
    //    border: none !important;
    //  }
    //}

    .card-body_it:last-child {
      margin-bottom: 0;
    }

    .left_img_box {
      width: 1.8vw;
      height: 3.1vh;
      border-radius: 3px;
      margin-right: 0.5vw;
      background: #F68F33;
      text-align: center;
      line-height: 3.1vh;

      .right_text_name {
        font-size: 0.8vw;
        color: #FFFFFF;
      }
    }

    .left_img_box2 {
      background: #3378F6;
    }

    .right_text_box {
      flex: 1;
      letter-spacing: 0.1vw;
      color: #ffffff;

      .right_text_name {
        font-size: 0.8vw;
        margin-bottom: 0.9vh;
      }

      .right_text_desc {
        font-size: 0.7vw;
        border-radius: 0.2vw;
        //border: 0.1vw solid rgba(255, 255, 255, 0.6);
        padding: 0.9vh 0.5vw;
        line-height: 1.8;
        background: #012a30;
      }
    }
  }

  .culture_home_bottom_right_box {
    .card-body {
      display: flex;
      flex-wrap: wrap;
    }

    .culture_home_top_right_box_item {
      width: 48%;
      margin-right: 4%;
      margin-bottom: 2.5vh;

      .ava_box {
        display: flex;
        letter-spacing: 0.1vw;
        align-items: center;
      }

      .img_box {
        margin-right: 0.5vw;
        width: 1.7vw;
        height: 3vh;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .name_box {
        color: #ffffff;

        .name {
          font-size: 0.7vw;
        }

        .time {
          font-size: 0.6vw;
        }
      }

      .content_box {
        .text_box {
          font-size: 0.7vw;
          color: #ffffff;
          margin: 1vh 0;
          line-height: 1.5;
        }

        .img_box {
          width: 11vw;
          height: 14.9vh;
          margin: 0 auto 1vh;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .replay_box {
        display: flex;
        justify-content: flex-start;
        background: #121f2e;
        border-radius: 0.1vw;
        padding: 1.5vh 0.8vw;

        .left_img_box {
          width: 1vw;
          height: 1.9vh;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 0.2vw;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .right_text_box {
          flex: 1;
          letter-spacing: 0.1vw;
          color: #ffffff;

          .right_text_name {
            font-size: 0.6vw;
            margin-bottom: 0.5vh;
          }

          .right_text_desc {
            font-size: 0.7vw;
            line-height: 1.5;
          }
        }
      }
    }

    .culture_home_top_right_box_item:nth-child(2n) {
      margin-right: 0;
    }
  }
}
</style>
